import {
  Button,
  Popover,
  ActionList,
  Icon,
  LegacyCard,
  Text,
  Box,
} from "@shopify/polaris";
import { useState, useCallback } from "react";
import styled from "./index.module.less";
import {
  MobileAcceptMajor,
  HorizontalDotsMinor,
  CancelMajor,
  ChatMajor,
} from "@shopify/polaris-icons";

import LegacyCardExample from "./components/card";
import LegacyCardExample2 from "./components/card2";

function PopoverWithActionListExample() {
  const [popoverActive, setPopoverActive] = useState(false);

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    []
  );
  const activator = (
    <Button disclosure onClick={togglePopoverActive} size="slim">
      今天
    </Button>
  );

  const [popoverActive1, setPopoverActive1] = useState(false);

  const togglePopoverActive1 = useCallback(
    () => setPopoverActive1((popoverActive1) => !popoverActive1),
    []
  );
  const activators = (
    <span className={styled.btn2}>
      <Button disclosure onClick={togglePopoverActive1} size="slim">
        所有渠道
      </Button>
    </span>
  );

  return (
    <div className={styled.Elment}>
      <div className={styled.box}>
        <div className={styled.top}>
          {/* 今天 */}
          <div>
            <Popover
              active={popoverActive}
              activator={activator}
              autofocusTarget="first-node"
              onClose={togglePopoverActive}
            >
              <ActionList
                actionRole="menuitem"
                items={[
                  {
                    content: "今天",
                    suffix: <Icon source={MobileAcceptMajor}></Icon>,
                    onAction: () => console.log("today"),
                    url:''
                  },
                  { content: "昨天" },
                  { content: "至今周数" },
                  { content: "本月至今" },
                  { content: "今年起" },
                ]}
              />
            </Popover>
          </div>
          {/* 今天 */}
          {/* 所有渠道 */}
          <div>
            <Popover
              active={popoverActive1}
              activator={activators}
              autofocusTarget="first-node"
              onClose={togglePopoverActive1}
            >
              <ActionList
                actionRole="menuitem"
                items={[
                  {
                    content: "所有渠道",
                    suffix: <Icon source={MobileAcceptMajor}></Icon>,
                  },
                  { content: "在线商店" },
                  { content: "Fox Reviews" },
                  { content: "其他" },
                ]}
              />
            </Popover>
          </div>
          {/* 所有渠道 */}
        </div>
        <div className={styled.Echarts}>
          <LegacyCard title="Online store dashboard" sectioned>
            <div className={styled.Content}></div>
          </LegacyCard>
        </div>
        <div className={styled.Guanggao}></div>
        <div className={styled.title}>接下来的操作</div>
        <div className={styled.Card}>
          <LegacyCardExample />
          <LegacyCardExample2 />
        </div>
      </div>
    </div>
  );
}

export default PopoverWithActionListExample;
